import React from 'react';
import { useEffect, useState } from 'react'
// useEffect
// 作用:用来模拟函数组件无生命周期的情况
// useEffect 触发时间: 相当于componentDidmount, 当数据更新完,或者数据初始化完毕, 页面已经渲染完do,执行该函数


const Father = () => {
    const [count, setCount] = useState(100);
    const [user, setUserFn] = useState({ name: '徐利鑫', age: 18 })
    // 写法1: 此时 相当于componentDidmount dom挂载完毕
    // 执行时间: 初始化执行, 当数据更新后,也执行
    // useEffect(() => {
    //     console.log('1'); //  初始化执行,当数据更新后,也执行
    //     console.log(document.querySelector('#count').innerHTML);
    // })

    // 写法2:
    // 执行时间: 初始化执行1, 当数据更新后先执行rerurn 函数 2, 然后再执行1
    // useEffect(() => {
    //     //console.log('1'); // 初始化执行,数据更新执行
    //     console.log(1, document.querySelector('#count').innerHTML);
    //     return () => {
    //         //console.log(2); // 数据更新执行
    //         console.log(2, document.querySelector('#count').innerHTML);
    //     }
    // })

    // 写法3:
    // 语法: useEffect(()=>{},[变量1, 变量2]) 
    // 参数2:为数组, 当依赖的数组中的变量发生变化, 参数1的钩子函数会被触发,当为空数组的时候,
    // 也就是没有依赖的值,也就是说依赖的值没有发生变化,则参数1钩子函数只有初始化执行,
    // 一般进行数据的请求操作 axios 请求
    // 有点像vue中计算属性
    // useEffect(() => {
    //     console.log(1) // 初始化执行,数据更新不执行
    // }, [])


    // 写法4:
    // 语法:: useEffect(()=>{return ()=>{}},[变量1, 变量2]) 
    // 只有当参数2数组中依赖的值 发生变化,才做再次执行 return 闭包函数, 再次 1
    useEffect(() => {
        console.log(1); // 初始化执行, 当监听的数据发生变化再次执行
        return () => {
            console.log(2); // 当监听的数据发生变化, 先执行
        }
    }, [user])

    return (
        <div>
            {/* {
                console.log('dom渲染')
            } */}
            <p>useEffect-hook的使用</p>
            <p id='count' onClick={() => {
                setCount(count + 1)
            }}>count:{count}</p>

            <p onClick={() => {
                setUserFn({
                    ...user,
                    age: user.age + 1
                })
            }}>user:{user.name}--{user.age}</p>
        </div>
    );
}

export default Father;
